<template>
  <div
    class="clip-container absolute inset-0 flex items-center z-clipImageWindow bg-black/60"
    @click.stop
  >
    <div
      class="w-full flex-1 px-[20px] max-h-[calc(100vh-40px)]"
      style="height: auto"
      @click.stop
    >
      <div
        class="pointer-events-auto relative mx-auto h-full overflow-hidden bg-white shadow-dialog dark:bg-color-b5 rounded-[12px] hi-img-cropper"
        style="max-width: 400px"
      >
        <button
          type="button"
          class="absolute right-0 top-0 h-[40px] w-[40px] duration-150 hover:text-color-t4 active:text-color-t2"
          @click="$emit('close')"
        >
          <i class="iconfont icon-close_icon text-[12px]"></i>
        </button>
        <div
          id="hi-img-cropper-main"
          class="hi-img-cropper-main h-full px-[58px] pt-[20px] pb-[40px]"
        >
          <div class="flex h-full flex-col">
            <div
              class="mb-[10px] w-full flex-shrink-0 text-center font-ali-75 text-[20px]"
            >
              编辑头像
            </div>
            <div class="flex-1 overflow-hidden">
              <div class="h-full overflow-hidden">
                <div class="relative h-0 w-full pb-[100%]">
                  <div class="absolute inset-0 p-[6px]">
                    <div class="h-full w-full bg-mosaic">
                      <img ref="img" class="cropImg h-full w-full" />
                    </div>
                  </div>
                </div>
                <div
                  class="mt-[18px] flex items-center justify-between text-color-t3"
                >
                  <div class="flex items-center">
                    <button title="右旋转" @click="operate('rightRotate')">
                      <i
                        class="iconfont icon-right_icon text-[20px]"
                      ></i></button
                    ><button
                      class="ml-[16px]"
                      title="左旋转"
                      @click="operate('leftRotate')"
                    >
                      <i class="iconfont icon-left_icon text-[20px]"></i>
                    </button>
                  </div>
                  <div>
                    <button title="复位" @click="operate('reset')">
                      <i class="iconfont icon-reduction_icon text-[20px]"></i>
                    </button>
                  </div>
                  <div class="flex items-center">
                    <button title="缩小" @click="operate('shrink')">
                      <i
                        class="iconfont icon-shrink_icon text-[20px]"
                      ></i></button
                    ><button
                      class="ml-[16px]"
                      title="放大"
                      @click="operate('enlarge')"
                    >
                      <i class="iconfont icon-enlarge_icon text-[20px]"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <div class="mt-[24px] w-full flex-shrink-0">
              <button
                type="button"
                class="hi-button rounded-[8px] duration-150 w-full h-[44px] text-[18px] bg-blue-500 text-white hover:bg-[rgb(96,165,250)] active:bg-[rgb(37,99,235)]"
                @click="confirm"
              >
                <span class="flex-center truncate"> 完成</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const emits = defineEmits(["confirm", "close", "operate"]);
const confirm = () => {
  emits("confirm");
};
const operate = (type: string) => {
  emits("operate", type);
};
const img = ref(null);
defineExpose({ img });
</script>
<style scoped>
#cropImg {
}
</style>
